<template>
	<view class="page-my page">
		<view class="point-banner pl bg-blue p-30">
			<view class="text-title-header c-000 p-t-50">
				<view class="title fz30 fw-b margin-10">Lanlanli积分商城正式上线了</view>
				<view class="desc fz18 c-999">
					<text>积分抵现</text>
					<text>推荐送分</text>
					<text>显示兑换</text>
				</view>
			</view>
			<view class="rule-list margin-top-50 c-333 fz26">
				<view class="rule-list-list margin-10">推荐新人礼获200积分</view>
				<view class="rule-list-list margin-10">消费10元获得1积分</view>
			</view>
			
			
		</view>
		<view class="top pr margin-10">
			<!-- <image src="../../static/imgs/bg-my.png" mode="" class="bg"></image> -->
			<view class="user-box pos-c pl">
				<image :src="user_info.headimgurl" mode="" class="user"></image>
			</view>
			<view class="user-box pos-c pl text-title" style="margin-left: 90px;text-align: left;">
				<view class="nick-name c-000 act"> {{user_info.true_name}}</view>
				<view class="fz28 c-999 margin-top-10">积分余额:<text>{{user_info.integral}}</text></view>
			</view>
			<view class="pos-r pr text-title" style="">
				<!-- <view class="nick-name c-999 act"> 积分规则 ></view> -->
				<view class="nick-name c-999 act"  @click="goRouter('/pagePoint/user/mypoints',{type:1})"> 积分记录 ></view>
			</view>
		</view>
		<!-- <view class="p-30">
			<view class="fz24 c-28 tac p-t-10 p-b-10 mb-30">您有<text class="c-fe">1</text>个待支付商品，将在<text class="c-fe">29</text>分钟后失效</view>	
		</view> -->
		<view class=" p-30 df bg-f wrap margin-bottom-100" >
			<goodItem v-for="item in goods_list" :key="item.id" :good="item"></goodItem>
		</view>

		<pageFooter></pageFooter>
	</view>
</template>

<script>
	import './css.scss'
	import goodItem from '../../components/points/goodItem.vue'
	export default {
		components:{
			goodItem
		},
		data() {
			return {
				query: {
					"keyWord": "", // 模糊搜索，搜索的字段对应keyWordLikeFields
					"type": 'integral_list', // 全等于筛选，对应fieldEq
					"page": 0, // 第几页
					"size": 100, // 每页返回个数
					"sort": "desc", // 排序方向
					"order": "id", // 排序字段
					"goods_type":2
				},
				list:[
					{id:2,name:'待支付',icon:require('../../static/imgs/pay1.png')},
					{id:3,name:'待发货',icon:require('../../static/imgs/pay2.png')},
					{id:4,name:'待收货',icon:require('../../static/imgs/pay3.png')},
					{id:5,name:'退款/售后',icon:require('../../static/imgs/pay4.png')},
				],
				goods_list:[
					// {id:1,title:'炸街保障，新品预览',click:'232',img:'../../static/goods/faxian1.png'},
					// {id:2,title:'炸街保障，新品预览',click:'5434',img:'../../static/goods/faxian2.png'},
					// {id:3,title:'炸街保障，新品预览',click:'3332',img:'../../static/goods/faxian3.png'},
					// {id:4,title:'炸街保障，新品预览',click:'6456',img:'https://z3.ax1x.com/2021/08/08/flFGtK.jpg'},
				],
				user_info:{
					
				},
			}
		},
		created() {
			this.init();
			this.userinfo();
		},
		methods: {
			handleClick(data) {
				this.goRouter(data.url)
			},
			async init() {
				 let res = await this.$api.goodsData(this.query).then(res=> {
					 console.log("积分商品列表")
						console.log(res)
						if(res.code == 0){
							this.goods_list = res.list;
							console.log(this.goods_list);
						}
						this.loadShow = false;
				 }).catch(err=> { console.log(err) }
				 );
			},
			async userinfo() {
				var query  = {
					'type':'user_info'
				};
				
				 let res = await this.$api.memberData(query).then(res=> {
					 console.log("用户信息")
						console.log(res)
						if(res.code == 0){
							this.user_info = res.data;
						}
						this.loadShow = false;
				 }).catch(err=> { console.log(err) }
				 );
			},
		}
	}
</script>

<style lang="scss">
.page-my {
	background-color: #F8F8F8;
	padding-top: 0;
	.top {
		background: linear-gradient(0deg,#d956a9, rgb(173, 51, 127));
			height: 320rpx;
		.bg {
			width: 100%;
			height: 320rpx;
		}
		.user-box {
			text-align: center;
			.user {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				
			}
		}
	}
	.order-container {
		border-radius: 27rpx;
		.order-tab {
			flex:1;
			.icon-tab {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 20rpx;
			}
			.icon-serve {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
